<template>
	<div class="chat-container">
    <div class="chat-message-list">
      <div v-for="(message, index) in state.messages" :key="index" class="chat-message">
        <div class="chat-message-sender">{{ message.sender }}</div>
        <div class="chat-message-content">{{ message.content }}</div>
      </div>
    </div>
    <div class="chat-input">
      <el-input v-model="state.inputMessage" placeholder="请输入消息"></el-input>
      <el-button @click="sendMessage">发送</el-button>
    </div>
  </div>
</template>
<script setup lang="ts" name="apiTest">
import { reactive } from 'vue'
import { exampleApi } from '/@/api/sys/example-api'

export interface AiMessage{
	sender: string;
	content: any;
} 

const state = reactive({
	messages: [] as AiMessage[],
	inputMessage: ''
})

const sendMessage = () => {
	if(state.inputMessage){
		exampleApi.sendAiCompletion(state.inputMessage).then(data => {
			state.messages.push({sender: state.inputMessage, content: data})
			state.inputMessage = ''
    }).catch(() => {
    }).finally(() => {
    })
	}
}
</script>

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
}

.chat-message-list {
  flex: 1;
  overflow-y: auto;
}

.chat-message {
  margin-bottom: 10px;
}

.chat-message-sender {
  font-weight: bold;
}

.chat-input {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
</style>